<template>
  <view class="app">
    <view class="head">
      <view class="title">物业缴费凭证</view>
      <view class="fee">
        ￥<text class="amount">{{ amount }}</text>
      </view>
      <view class="info">
        <view class="fee-item">
          <view class="fee-name">物业费</view>
          <view class="fee-price">{{ fees.perty }}</view>
        </view>
        <view class="fee-item">
          <view class="fee-name">停车费</view>
          <view class="fee-price">{{ fees.car }}</view>
        </view>
      </view>
    </view>
    <view class="body">
      <view class="pay-list" v-for="(item, index) in payList" :key="index">
        <view class="pay-item">{{ item.name }}</view>
        <view class="pay-value">{{ item.value }}</view>
      </view>
    </view>
  </view>
  <up-loading-page
    :loading="show"
    loading-mode="semicircle"
    :loading-text="text"
  ></up-loading-page>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { userInfo } from '@/api/home'

const amount = ref(246.9)
const fees = ref({
  perty: 200,
  car: 46.9
})

const text = ref('正在查询支付结果，请稍候...')
const show = ref(true)

const payList = ref<object[]>([])

onLoad(async () => {
  const res = await userInfo()
  payList.value = [
    { name: '支付单号', value: 'WX202412312359' },
    { name: '支付方式', value: '微信支付' },
    { name: '支付时间', value: '2021-12-31 23:59' },
    { name: '楼层', value: '九栋' },
    { name: '单元', value: '201' },
    { name: '户主', value: res.data.username }
  ]
})

onMounted(() => {
  // 写一个定时器
  setTimeout(() => {
    show.value = false
  }, 7000)
})
</script>

<style lang="scss" scoped>
.app {
  width: 95%;
  margin: 0 auto;
  background-color: #fff;
  padding-bottom: 100rpx;
  padding-top: 100rpx;
  margin-top: 40rpx;
  border-radius: 20rpx;
  .head {
    height: 600rpx;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .title {
      font-size: 30rpx;
      color: #000;
    }
    .fee {
      font-size: 50rpx;
      color: #f67828;
      .amount {
        font-size: 100rpx;
      }
    }
    .info {
      width: 60%;
      height: auto;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      margin-top: 30rpx;
      .fee-item {
        display: flex;
        flex-direction: column;
        text-align: center;
        color: #999;
        .fee-name {
          font-size: 30rpx;
          font-weight: 600;
          color: #000;
        }
      }
    }
  }
  .body {
    width: 90%;
    margin: 0 auto;
    height: auto;
    .pay-list {
      display: flex;
      justify-content: space-between;
      margin-top: 20rpx;
      .pay-item {
        font-size: 30rpx;
        color: #999;
      }
      .pay-value {
        font-size: 40rpx;
        color: #000;
      }
    }
  }
}
</style>
